<template>
    <div>
        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部" name="one"></el-tab-pane>
            <el-tab-pane label="未付款" name="two"></el-tab-pane>
            <el-tab-pane label="待发货" name="three"></el-tab-pane>
            <el-tab-pane label="待收货" name="four"></el-tab-pane>
            <el-tab-pane label="已完成" name="five"></el-tab-pane>
            <el-tab-pane label="待处理" name="six"></el-tab-pane>
            <el-tab-pane label="已取消" name="seven"></el-tab-pane>
            <el-tab-pane label="回收站" name="eight"></el-tab-pane>
        </el-tabs>

         <el-table
            ref="multipleTable"
            :data="tableData3"
            tooltip-effect="dark"
            style="width: 100%;"
            @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            label="商品ID"
            width="90"
            align="center">
            <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
            prop="name"
            label="商品类型"
            width="120"
            align="center">
            </el-table-column>
            <el-table-column
            prop="address"
            label="商品名称"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            label="商品封面"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
            <img src="../assets/logo.png" alt="" style="width:60px;height:60px;">
            </template>
            </el-table-column>
            <el-table-column
            prop="sale"
            label="售价"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="size"
            label="库存"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="status"
            label="状态"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="hsale"
            label="已售"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="address"
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
        </el-pagination>
    </div>
</template>


<script>
export default {
    data() {
      return {
        tableData3: [{
          date: '1',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '2',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '3',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '4',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '5',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '6',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '7',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }],
        multipleSelection: []
      }
    },
    methods:{
        handleClick(e){
            console.log(e.name)
        }
    }
};
</script>

<style lang="less" scoped>
</style>


